<script setup lang="ts">
	import { asideMenuSafePaddingStyle } from '../../utils/system';
	import { DATA_MAIN_HOME_DRAWER, DATA_MAIN_HOME_DRAWER_OPERATIONS } from '../../utils/data'
	const nav = (e: string) => {
		uni.navigateTo({
			url: e,
			animationType: 'fade-in',
			animationDuration: 200
		})
	}
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n()
</script>
<template>
	<view class="aside-container" :style="asideMenuSafePaddingStyle()">
		<view>
			<view v-for="item in DATA_MAIN_HOME_DRAWER" class="aside-menu-block" :key="item.id">
				<view class="item-list" v-if="item.children">
					<view class="aside-menu-list-item" v-for="it in item.children" :key="it.text">
						<uni-icons :type="it.icon" size="20"></uni-icons>
						<text class="title">{{t(it.text)}}</text>
					</view>
				</view>
				<view class="aside-menu-item" v-else>
					<uni-icons :type="item.icon" size="20"></uni-icons>
					<text class="title">{{t(item.text)}}</text>
				</view>
			</view>
		</view>
		<view class="operations">
			<view v-for="item in DATA_MAIN_HOME_DRAWER_OPERATIONS" :key="item.id" @click="nav(item.route)">
				<view class="flex-center">
					<view class="operation-icon flex-center">
						<uni-icons :type="item.icon" size="16"></uni-icons>
					</view>
					<text class="operation-text">{{t(item.text)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.aside-container {
		height: 100%;
		width: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.aside-menu-block {
			padding: 0 20rpx 13rpx 20rpx;
			.aside-menu-list-item, .aside-menu-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				padding: 20rpx 25rpx;
				background-color: white;
			}
			.item-list {
				.aside-menu-list-item {}
				.aside-menu-list-item:first-child {
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}
				.aside-menu-list-item:last-child {
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}
			}
			.aside-menu-item {
				border-radius: 20rpx;
			}
			.title {
				margin-left: 23rpx;
				font-size: $font-size-28;
			}
		}
		.operations {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			.operation-icon {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				background-color: #ebebeb;
			}
			.operation-text {
				margin-top: 10rpx;
				font-size: $font-size-20;
			}
		}
	}
</style>